<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>eleTree 树组件 eleTree - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="包括tree的下拉，checkbox，拖拽，右键菜单，手风琴，懒加载，搜索"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>eleTree 树组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">eleTree</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/21065688/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">凉宫</cite> <img src="/avatar/21065688.jpg" alt="凉宫"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>包括tree的下拉，checkbox，拖拽，右键菜单，手风琴，懒加载，搜索</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2020-12-17 </span> <span class="layui-inline">创建：2018-9-14 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="https://layuiextend.hsianglee.cn/eleTree/" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <div class="layui-elem-quote"> <a href="https://eletree.hsianglee.cn/" target="_blank" rel="nofollow">eleTree2.0文档及示例</a> 
        <br> <a href="https://layuiextend.hsianglee.cn/eleTree/" target="_blank" rel="nofollow">在线文档（最新）</a> 
        <br><a href="https://layuiextend.hsianglee.cn/eleTree/test.html" target="_blank" rel="nofollow">在线示例</a> 
        <br><a href="https://github.com/hsiangleev/layuiExtend" target="_blank" rel="nofollow">github源码</a> 
       </div>
       <div class="layui-elem-quote">
         仿elementUI文档重写
       </div>eleTree.render()参数说明
       <br>
       <pre>1. elem: "",   //指定原始 table 容器的选择器或 DOM<br>2. data: [],    直接赋值数据<br>3. emptText: "暂无数据",        // 内容为空的时候展示的文本<br>4. renderAfterExpand: true,    // 是否在第一次展开某个树节点后才渲染其子节点<br>5. highlightCurrent: false,    // 是否高亮当前选中节点，默认值是 false。<br>6. defaultExpandAll: false,    // 是否默认展开所有节点<br>7. expandOnClickNode: true,    // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。<br>8. checkOnClickNode: false,    // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。<br>9. defaultExpandedKeys: [],    // 默认展开的节点的 key 的数组<br>10. autoExpandParent: true,     // 展开子节点的时候是否自动展开父节点<br>11. showCheckbox: false,        // 节点是否可被选择<br>12. checkStrictly: false,       // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false<br>13. defaultCheckedKeys: [],     // 默认勾选的节点的 key 的数组<br>14. accordion: false,           // 是否每次只打开一个同级树节点展开（手风琴效果）<br>15. indent: 16,                 // 相邻级节点间的水平缩进，单位为像素<br>16. lazy: false,                // 是否懒加载子节点，需与 load 方法结合使用<br>17. load: function() {},        // 加载子树数据的方法，仅当 lazy 属性为true 时生效<br>18. draggable: false,           // 是否开启拖拽节点功能<br>19. contextmenuList: [],        // 启用右键菜单，支持的操作有："copy","add","edit","remove"<br>20. method: "get",    // 接口http请求类型，默认：get<br>21. url: "",      // 异步数据接口<br>22. contentType: "",    // 发送到服务端的内容编码类型<br>23. headers: {},    // 接口的请求头。如：headers: {token: 'sasasas'}<br>24. done: null,    // 数据请求完成的回调函数，只有异步请求才会有<br>25. response: {   // 对于后台数据重新定义名字<br>    statusName: "code",<br>    statusCode: 0,<br>    dataName: "data"<br>},<br>26. request: {     // 对后台返回的数据格式重新定义<br>    name: "label",<br>    key: "id",<br>    children: "children",<br>    checked: "checked",<br>    disabled: "disabled",<br>    isLeaf: "isLeaf"<br>},<br>27. searchNodeMethod: null    // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏</pre>基础方法
       <br>
       <pre>var el=eleTree.render({<br>    // ...<br>})<br>&gt; el.updateKeyChildren(key,data) // 更新子节点<br>&gt; el.updateKeySelf(key,data) //更新当前节点<br>&gt; el.getChecked(leafOnly, includeHalfChecked)   // 获取选中的节点，接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false<br>&gt; el.setChecked(arr) //设置选中的节点，传入数组key值<br>&gt; el.unCheckNodes() //取消所有选中的节点<br>&gt; el.expandAll() //展开所有<br>&gt; el.unExpandAll() //合并所有<br>&gt; el.remove(key) //删除节点<br>&gt; el.append(key,data) //添加子节点<br>&gt; el.insertBefore(key,data) //添加到节点之前<br>&gt; el.insertAfter(key,data) //添加到节点之后<br>&gt; el.reload(data) //重新加载树<br>&gt; el.search(val) //搜索树(val为搜索值)，执行此方法会去执行searchNodeMethod方法，searchNodeMethod的第一个参数为val搜索值，第二个参数为每个节点的数据</pre>事件监听
       <br>
       <pre>eleTree.render({<br>    // ...<br>})<br>// 节点点击事件<br>eleTree.on("nodeClick(data1)",function(d) {<br>    console.log(d.data);    // 点击节点对于的数据<br>    console.log(d.event);   // event对象<br>    console.log(d.node);    // 点击的dom节点<br>    console.log(this);      // 与d.node相同<br>}) <br>// input被选中事件<br>eleTree.on("nodeChecked(data1)",function(d) {<br>    console.log(d.data);    // 点击节点对于的数据<br>    console.log(d.isChecked);   // input是否被选中<br>    console.log(d.node);    // 点击的dom节点<br>    console.log(this);      // input对于的dom<br>})<br>// 鼠标右键事件<br>eleTree.on("nodeContextmenu(data1)",function(d) {<br>    console.log(d.data);    // 点击节点对于的数据<br>    console.log(d.event);   // event对象<br>    console.log(d.node);    // 点击的dom节点<br>    console.log(this);      // 与d.node相同<br>})<br>// 节点被拖拽事件<br>eleTree.on("nodeDrag(data1)",function(d) {<br>    console.log(d);<br>    d.stop();           // 取消拖拽<br>    console.log(d.current);    // 起始节点对应的dom和数据<br>    console.log(d.target);   // 鼠标落点对应的dom和数据<br>    console.log(this);      // 鼠标落点对应的dom<br>})<br>// 添加子节点事件<br>eleTree.on("nodeAppend(data1)",function(d) {<br>    console.log(d.data);    // 点击节点对于的数据<br>    console.log(d.node);    // 点击的dom节点<br>    console.log(this);      // 与d.node相同<br>    d.stop();               // 取消添加<br>    d.setData({             // 自定义数据<br>        key: 666,<br>        label: "aaa"<br>    })<br>})<br>// 添加节点之前事件<br>eleTree.on("nodeInsertBefore(data1)",function(d) {<br>    console.log(d.data);    // 点击节点对于的数据<br>    console.log(d.node);    // 点击的dom节点<br>    console.log(this);      // 与d.node相同<br>    d.stop();               // 取消添加<br>    d.setData({             // 自定义数据<br>        key: 666,<br>        label: "aaa"<br>    })<br>})<br>// 添加节点之后事件<br>eleTree.on("nodeInsertAfter(data1)",function(d) {<br>    console.log(d.data);    // 点击节点对于的数据<br>    console.log(d.node);    // 点击的dom节点<br>    console.log(this);      // 与d.node相同<br>    d.stop();               // 取消添加<br>    d.setData({             // 自定义数据<br>        key: 666,<br>        label: "aaa"<br>    })<br>})<br>// 节点被编辑事件<br>eleTree.on("nodeEdit(data1)",function(d) {<br>    console.log(d.data);        // 点击节点对于的数据<br>    console.log(d.node);        // 点击的dom节点<br>    console.log(d.value);       // 新输入的值<br>    console.log(this);          // 与d.node相同<br>    d.stop();                   // 取消编辑<br>})<br>// 节点被删除事件<br>eleTree.on("nodeRemove(data1)",function(d) {<br>    console.log(d.data);        // 点击节点对于的数据<br>    console.log(d.node);        // 点击的dom节点<br>    d.stop();                   // 取消删除<br>})</pre> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/21065688_1572254201741_25795.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://github.com/hsiangleev/layuiExtend" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-black"> 去 GitHub 下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>